<!--
slot:select

      <McPopoverMulSelect v-model="v" :mc-config="mcConfig" :el-checkbox-attr="{'disabled':false}" >
        <template #row="scope">
          <el-tag>{{scope.row.id}}</el-tag>
        </template>

      </McPopoverMulSelect>

@change
 -->

<template>
  <el-popover
    class="mc-popover-mul-select"
      @show="refresh"
      placement="bottom"
      width="400"
      trigger="click"
      v-model="show"
      >
    <el-row class="mc-popover-mul-select-row">
      <el-col :span="24">
        <el-input  v-model="keyword" placeholder="按回车搜索" @keyup.enter.native="refresh" suffix-icon="iconfont el-icon-search"/>
      </el-col>
      <el-col :span="24" style="overflow-y: auto">
        <el-checkbox-group  v-bind="elCheckboxGroupAttr" v-model="dataList" >
          <template v-for="(item,i) in showList">
            <el-col class="mc-popover-mul-select-col" :span="24">
              <el-checkbox v-bind="elCheckboxAttr" :label="item._k"
                           @change="mcCheckBoxChange(item,$event)">
                <slot name="select" :row="item" :index="i"></slot>
                <el-tag v-if="mcConfig.pkTextField">{{item._v}}</el-tag>
              </el-checkbox>
            </el-col>
          </template>
        </el-checkbox-group>
      </el-col>
        <el-col>
          <el-button style="float: right" size="small" type="primary" @click="clear">清空</el-button>
        </el-col>
      </el-row>
    <div style="display: inline-block" slot="reference">
      <template v-for="(item,i) in textList">
        <slot name="text" :row="item" :index="i"></slot>
        <el-tag @close="cancelSelect(item._k)" closable v-if="mcConfig.pkTextField">{{item._v}}</el-tag>
      </template>
      <el-button type="text"  v-if="!textList || textList.length<=0">+ 点击选择</el-button>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: 'mc-popover-mul-select',
  data () {
    return {
        show:false,
        loading:false,
        showList:[],
        showListCache:[],
        textList:[],//选中的内容
        //搜索关键词
        keyword:"",
    }
  },
  //暂时预定10个参数 大部分用户2-3个就够了
  props:
  {
    mcConfig:{type:Object,default:function(){return {api:{}} }},
    elCheckboxAttr:{type:Object,default:function(){return {} }},
    elCheckboxGroupAttr:{type:Object,default:function(){return {} }},
    value:{type:String,default:""},
    'mcv1':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv2':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv3':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv4':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv5':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv6':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv7':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv8':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv9':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv10':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv11':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv12':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv13':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv14':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv15':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv16':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv17':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv18':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv19':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv20':{type:[String,Number,Date,Boolean,Array,Object],default:null},
  },
  computed:{
    dataList:{
      get:function (){
        if(this.value===null || typeof this.value=='undefined'||this.value===''){
            return [];
        }
        if(this.value.indexOf(",")==-1){
          return [this.value];
        }
        return this.value.split(",");
      },
      set:function (v){
        if(v){
            this.$emit("input",v.join(","));
        }else{
            this.$emit("input",null);
        }
      }
    }
  },
  //监听下变更 再动态修改url 经常会出现 绑定了输入框的值
  watch:{
      value(){
        this.refresh();
      }
  },
  mounted(){
    this.refresh();
  },
  methods:{
    cancelSelect(id){
      for(var i=0;i<=this.dataList.length;i++){
        if(this.dataList[i]===id){
          this.dataList.splice(i,1)
          break;
        }
      }
      this.$emit("input",this.dataList.join(","));
    },
    clear(){
      this.dataList=[];
    },
    clickQuery(){
        this.refresh();
    },
    refresh(){
        var request = this.$magicaltool.request;
        var _t = this;
        if(this.mcConfig && this.mcConfig.api){
            var url = this.mcConfig.api.url;
            if(url){
                var method = this.mcConfig.api.method||'post';
                var limit = this.mcConfig.api.limit||20;
                var param = {};
                var ncv = request.util.collectMcNameCompareValue(this);
                if(request.util.isMcQueryUrl(url) || request.util.isContentTypeJson(this.mcConfig.api.contentType)){
                    param = request.util.paramsTomMcQuery(ncv);
                    if(this.mcConfig.api.fields && this.mcConfig.api.fields.length>0){
                        param.fields = this.mcConfig.api.fields
                    }
                    url += url.indexOf("?")!=-1 ? "&" : "?";
                    url += "limit="+limit;
                    //智能搜索 like
                    if(this.keyword){
                        param.param[this.mcConfig.pkTextField] = this.keyword;
                        param.condition[this.mcConfig.pkTextField] = "like";
                    }
                    //如果刚开始有值 v-model 就一定要查询
                    if(this.value){
                      param.param[this.mcConfig.pkField] = this.value;//加个外键查询
                    }
                }else{
                    param = request.util.paramsToJson(ncv);
                    if(this.keyword){
                      param[this.mcConfig.pkTextField]=this.keyword;//加个关键词入参
                    }
                    if(this.value){
                      param[this.mcConfig.pkField] = this.value;//加个外键查询
                    }
                    param.limit = limit;//加个关键词入参
                }
                this.loading = true;
                request.axios({cache:true,contentType:this.mcConfig.api.contentType,$vue:this,url:url,method:method,param:param}).then(function(res){
                    _t.loading = false;
                    var list = res.data;
                    if(list){
                       var results = [];
                       var textList = [];
                       if(list){
                          for(var n=0;n<list.length;n++){
                              var item = list[n];
                              var key = item[_t.mcConfig.pkField]+"";
                              var value = item[_t.mcConfig.pkTextField]+"";
                              item._k = key;
                              item._v = value;
                              results.push(item);
                              if(_t.value && (","+_t.value+",").indexOf(","+key+",")!=-1){
                                textList.push(item);
                              }
                          }
                       }
                       _t.showList = results;
                       _t.textList = textList;
                    }else {
                      _t.showList = [];
                      _t.textList = [];
                    }
              })
            }
        }
    },
    mcCheckBoxChange(item,e){

    }

  }
}
</script>

<style lang="scss">
  .mc-popover-mul-select-row .mc-popover-mul-select-col{
    margin-top : 10px;
  }
</style>
